<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人分类</title>
    <th:block th:include="hander/navigation :: common(~{::links})"></th:block>
    <!--  js引入  -->
    <th:block th:include="/hander/navigation :: commonjs"></th:block>
</head>
<body class="after-body">
<!--  顶部导航栏  -->
<th:block th:replace="/hander/navigation :: navheader" ></th:block>
<script>
<!--  新建弹出模态框  -->
    $(function () {
        $("#xinjian").click(function () {
            $("#createSpecial").modal({
                backdrop: false,
                keyboard: true, //Esc关闭
                show: true // 打开
            });
        });
        // 关闭模态框后执行的动作
        $("#createSpecial").on('hidden.bs.modal',function () {
           // $("#specialForm")[0].reset(); //清除模态框内部信息
            $("#sid").val('');
            $("#aid").val('');
            $("#sname").val('');
            $("#sdescribe").val('');
            $("#surl").val('');
        }).modal('hide');
    });
</script>
<div class="row body2 leftuserinfo">
<div class="col-md-12" style="margin: 25px 0 0 0;" >
<form id="blogForm" onsubmit="return false;">
<!--  右边区域  -->
    <div class="blog-title" id="adminblogright" style="float: right;">
        <!--    分类专栏区域    -->
       <div >
           <div style="height: auto;">
               <div>
                    <h4>分类专栏</h4>
               </div>
               <div style="margin-top:10px;float: right;">
                   <button type="button" class="btn btn-primary" id="xinjian" >新建</button>
               </div>
               <div id="topz" style="margin-top: 50px;">
                <!--     分类管理区域   -->
                   <ul class="nav nav-tabs">
                       <li class="specialfy active">
                           <a onclick="window.location.reload();">全部(<span th:text="${pageSpecial.getTotal()}"></span>)</a>
                       </li>
                       <li class="specialfy">
                           <a  onclick="recycleSpecial(1,5)">回收站</a>
                       </li>
                   </ul>
               </div>
<!--    分类显示区域   -->
               <div id="recycleSpecial" th:if="${pageSpecial.getTotal() != 0 }">
                   <div style="margin-top: 25px;border: 1px dashed #7f8087;width: available;"></div>
                   <span id="fenlei">
                       <th:block th:each="special,specialStat:${pageSpecial.getObjects()}">
                       <div style="float: left;margin: 20px 0 0 43px;">
                           <img th:src="${special.surl}" class="img-rounded" width="50px" height="50px">
                           &emsp;&emsp;
                           <span style="font-size: 18px;font-weight: 600;" th:text="${special.getSname()}"></span>
                       </div>
                       <div style="margin:35px 0 0 600px;">
                           <div class="btn-group-sm">
                               <button type="button" class="btn btn-link" style="text-decoration: none;outline: none;">管理</button>
                               &boxv;
                               <button type="button" class="btn btn-link" style="text-decoration: none;outline: none;"
                                       data-toggle="modal" data-target="#createSpecial"
                                       th:onclick="|modelUpdate(${special.sid},0)|">编辑</button>
                               &boxv;
                               <button type="button" class="btn btn-link" style="text-decoration: none;outline: none;" th:onclick="|delSpecial(${special.sid},1)|">删除</button>
                           </div>
                       </div>
                       <div style="margin-top: 24px;border: 1px dashed #7f8087;width: available;"></div>
                        </th:block>
                   </span>
                   <!--            分页          -->
                   <div id="fenye" class="plq" style="text-align: center;">
                       <ul class="pagination">
                           <li ><a th:href="@{/special/classify-admin(page=${pageSpecial.getCurrent()} - 1 <= 0 ? 1: ${pageSpecial.getCurrent()},size=${pageSpecial.getSize()})}">&laquo;</a></li>
<!--   中间页 -->
                           <th:block th:each="i:${#numbers.sequence(1,pageSpecial.getPages())}">
                               <li class="" >
                                   <a th:href="@{/special/classify-admin(page=${i} ,size=${pageSpecial.getSize()})}" th:text="${i}" ></a>
                               </li>
                           </th:block>

                           <li ><a th:href="@{/special/classify-admin(page=${pageSpecial.getCurrent()} + 1 ,size=${pageSpecial.getSize()})}" >&raquo;</a></li>
                       </ul>
                   </div>
               </div>
<!--  无分类   -->
               <div id="recycleSpecial" th:if="${pageSpecial.getTotal() == 0 }">
                   <div style="margin-top: 25px;border: 1px dashed #7f8087;width: available;"></div>
                   <span id="fenlei">
                       <div style="text-align: center;margin-top: 25px;">暂无分类</div>
                       <div style="margin-top: 24px;border: 1px dashed #7f8087;width: available;"></div>
                   </span>
                   <!--            分页          -->
                   <div id="fenye" class="plq" style="text-align: center;"></div>
               </div>
           </div>
       </div>
    </div>
<!--  左侧个人类别区域  -->
    <div style="float: left;margin-bottom: 20px;" >
        <th:block th:replace="/hander/navigation :: adminBlog-left"></th:block>
    </div>
</form>
</div>
</div>
<!-- 模态框（Modal） 新建个人分类专栏 -->
<div class="modal fade " id="createSpecial" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" style="font-weight: 600" id="myModalLabel">
                    个人分类
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal row" role="form" id="specialForm" enctype="multipart/form-data">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="sname">分类名称：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="sname" id="sname" placeholder="请输入分类名称" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="sdescribe">描述：</label>
                        <div class="col-sm-10">
                            <textarea name="sdescribe" id="sdescribe" maxlength="255" class="form-control" placeholder="请描述一下该分类"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="upload">图片：</label>
                        <div class="col-sm-10">
                            <input type="file"  name="upload" id="upload" onchange="uploadFile()" />
                        </div>
                    </div>
                    <input type="hidden" id="surl" name="surl" >
                    <input type="hidden" id="aid" name="aid" th:value="${session.aid}">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="createSpecial()" >
                    提交
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<style>
    .blog-title{
        width: 850px;
        height: auto;
    }
    .top-left{
        margin-top: 30px;
    }
</style>
</body>

</html>
